<template id="Index">
  <div class="page has-navbar" v-nav="{hideNavbar: true, }">
    <von-header theme="positive">
      <button class="button button-icon ion-ios-search" slot="left" @click="searchClick()" ></button>
      <span slot="title"><img src="../assets/images/logo.png" alt=""></span>
      <button class="button button-icon ion-dzb" slot="right" @click="dzbClick()">
        <img src="../assets/images/dzb_logo.png" alt="">
      </button>
    </von-header>
    <div class="page-content"><!--此DIV内为正文内容-->
      
      <!-- <router-link class="button button-assertive" to="/Index/about">
        <i class="ion-information-circled"></i> About
      </router-link>
      <router-link class="button button-assertive" to="/Index/new">
        <i class="ion-information-circled"></i> New
      </router-link> -->
      <router-view ref="fatherWrap" class="fatherWrap"></router-view>
      
      
    </div>
    <div class="inner-page" v-tabbar="{'menus': menus, menuColor: '#B5B5B5', activeMenuColor: '#A91010', onMenuClick: menuClicked}">        
        </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        themes: [
          'light',
          'stable',
          'positive',
          'calm',
          'balanced',
          'energized',
          'assertive',
          'dark'
        ],
        menus: [
          {
            iconOn: 'ion-ios-home',
            iconOff: 'ion-ios-home-outline',
            text: '深度',
            path: '/Index/new'
          },
          {
            iconOn: 'ion-ios-pricetags',
            iconOff: 'ion-ios-pricetags-outline',
            text: '快讯',
            path: '/Index/discount'
          },
          {
            iconOn: 'ion-ios-cart',
            iconOff: 'ion-ios-cart-outline',
            text: '行情',
            path: '/Index/cart',
            badge: '5'
          },
          {
            iconOn: 'ion-ios-person',
            iconOff: 'ion-ios-person-outline',
            text: '设置',
            path: '/Index/user'
          }
        ]
      }
    },
    mounted:function(){
      //this.$router.push('news')// 页面加载时跳转
      //console.dir(this.$refs.fatherWrap.$el.clientHeight = )
      
    },
    methods:{
      searchClick: function(){
        this.$router.push('/Index/Search')
      },
      dzbClick: function(){
        this.$router.push('/Index/Dzb')
      },
      menuClicked(menuIndex) {
        console.log(menuIndex)
      }
    }
  }
</script>
<style scope lang="less">
  h2 {
    font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif;
    color: #888;
  }

  h3 {
    font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif;
    line-height: 150px;
    color: #fff;
  }

  .page.has-navbar .page-content {
    
    margin-bottom: 46px;
  }
  .bar-header {
    .title {
      img {
        height: 24px;
        vertical-align: top;
        margin-top: 10px;
      }
    }
  }
  .bar.bar-positive {
    border-color: #0a2655;
    background-color: #0a2655;
    background-image: linear-gradient(0deg, #0a2655, #0a2655 50%, transparent 50%);
  }
  .bar .buttons .button-icon:before {
    font-size: 24px;
  }
  .bar .buttons .ion-dzb {
    img {
      width: 20px;
    }
  }
  .fatherWrap {
    overflow-y: hidden;
  }
</style>
